<script lang="ts" setup>
import dayjs from 'dayjs';
const getDay = () => {
  const week = dayjs().day()
  const nums = [1, 2, 3, 4, 5, 6, 7]
  const days = ['一', '二', '三', '四', '五', '六', '天',]
  return '星期' + days[nums.indexOf(week)]
}
</script>

<template>
  <div class="user">
    <div class="user_info">
      <img src="../../../assets/avatar.jpg" alt="">
      <span>吴锦灿 下午好！</span>
    </div>
    <span class="time">{{ dayjs().format('YYYY年MM月DD日') }} {{ getDay() }}</span>
  </div>
</template>

<style lang="scss" scoped>
.user {
  padding: 24px;
  box-sizing: border-box;
  height: 200px;
  border-radius: 10px;
  background: linear-gradient(0, rgb(252, 252, 255), rgbq(242, 242, 255, .5));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // box-shadow: 0 0 5px 5px rgb(227, 227, 236);
  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}

.user_info {
  display: flex;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  span {
    font-weight: 700;
    padding-left: 16px;
    font-size: 24px;
    color: rgb(22, 22, 22);
  }

}

.time {
  color: rgb(22, 22, 22);
}
</style>